<template>
	<view class="content">
		<header>
			<div class="head">
				<span>宏烨找房</span>
			</div>
			<!-- 搜索 -->
			<div class="search">
				<div class="sear">
					<div>北京 <span>▼</span></div>
					<div class="ipt" @click="goSearch">
						<input type="text" placeholder="请在这里输入区域/商圈" placeholder-style="color:#fff;"> 
						<img src="https://img.ljcdn.com/beike/arsenal/1558325041803.png" alt="">
					</div>
				</div>
			</div>
		</header>
		<!-- 轮播图 -->
		<swiper autoplay indicator-dots circular class="swiper" indicator-color="rgb(255,255,255)">
			<swiper-item class="swiper_item">
				<img src="https://img2.baidu.com/it/u=3131930079,2392047729&fm=26&fmt=auto&gp=0.jpg" alt="" mode="widthFix" />
			</swiper-item>
			<swiper-item class="swiper_item">
				<img src="https://img1.baidu.com/it/u=2063869514,2768102289&fm=26&fmt=auto&gp=0.jpg" alt="" mode="widthFix" />
			</swiper-item>
			<swiper-item class="swiper_item">
				<img src="https://img2.baidu.com/it/u=747161817,3259031072&fm=11&fmt=auto&gp=0.jpg" alt="" mode="widthFix" />
			</swiper-item>
			
		</swiper>
		<!-- 分类导航 -->
		<div class="classifynav">
			<div class="cnav">
				<li @click="gobuyhome">
					<img src="https://pic6.ajkimg.com/news/55985a5eaa5170f5f9b2ca15709856c0?imageMogr2/format/jpg/thumbnail/132x132" alt="">
					<span>买房</span>
				</li>
				<li @click="goputtinghome">
					<img src="https://pic6.ajkimg.com/news/7296feca9e3489af8fb382d73feb9305?imageMogr2/format/jpg/thumbnail/132x132" alt="">
					<span>租房</span>
				</li>
				<li @click="gowanthouse">
					<img src="https://pic6.ajkimg.com/news/1bde93c400ecc11fbc9c1c61e977bae3?imageMogr2/format/jpg/thumbnail/135x132" alt="">
					<span>求租</span>
				</li>
				<li @click="gowantedbuy">
					<img src="https://pic1.ajkimg.com/display/xinfang/b3605eb6e3be7d76192f80e13387204e/135x132x100n.jpg" alt="">
					<span>求购</span>
				</li>
				<li @click="gomap">
					<img src="https://pic6.ajkimg.com/news/5668dc3e7e78f40d09e71fe33a94e36b?imageMogr2/format/jpg/thumbnail/135x132" alt="">
					<span>地图找房</span>
				</li>
				<li @click="goinformation">
					<img src="https://pic6.ajkimg.com/news/d2b492eb739a642335a331350ccee439?imageMogr2/format/jpg/thumbnail/132x132" alt="">
					<span>资讯</span>
				</li>
				<li @click="realestate">
					<img src="https://pic6.ajkimg.com/news/f3ae4ecfdc95535c72bb8e182d6ce9b5?imageMogr2/format/jpg/thumbnail/132x132" alt="">
					<span>楼市圈</span>
				</li>
				<li @click="gobroker">
					<img src="https://pages.anjukestatic.com/usersite/touch/weixin/img/esf/xcx_home_icon_fdjs.png" alt="">
					<span>经纪人</span>
				</li>
				<li @click="gogrouphouse">
					<img src="https://pages.anjukestatic.com/usersite/app/other/xcx_home_icon_yzff@2x.png" alt="">
					<span>团购看房</span>
				</li>
				<li @click="golive">
					<img src="https://pic6.ajkimg.com/news/934b995e96fa8b5314b91f5833d50174?imageMogr2/format/jpg/thumbnail/132x132" alt="">
					<span>直播看房</span>
				</li>
			</div>
		</div>
		<!-- 楼市资讯 -->
		<div class="information">
			<div class="information_top">
				<h1>楼市资讯</h1>
				<span @click="goinformation">更 多</span>
			</div>
			<swiper autoplay circular="true" vertical='true' interval="3000" display-multiple-items='4'  class="information_bot" indicator-color="rgb(255,255,255)">
				<swiper-item class="li">
					<span>TOP1</span>
					<div>心悦尚城新房正在抢购心悦尚城新房正在抢购！</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP2</span>
					<div>承袭古典庭堂制式，暗藏移步异景妙趣</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP3</span>
					<div>引领品质迭代，筑墅质洋房住区</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP4</span>
					<div>重磅规划！国家"点名"通州湾！</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP5</span>
					<div>首开劲销！揭秘主城人气红盘热销背后的硬核逻辑！</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP6</span>
					<div>占位平潮主城核心，享高铁新城潜力</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP7</span>
					<div>【公益助考】璀璨向心力，与南通迎赴未来</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP8</span>
					<div>二手价格翻倍！南通这个小区业主维权不断，卖了近十年还没完</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP9</span>
					<div>择址稀贵主城三环内，悦享丰盛配套</div>
				</swiper-item>
				<swiper-item class="li">
					<span>TOP10</span>
					<div>超级公园系统典藏生活优雅与浪漫，与品质人居不期而遇</div>
				</swiper-item>
			</swiper>
		</div>
		<!-- 热门楼盘 -->
		<div class="hothouses">
			<div class="hothouses_top">
				<h1>热门楼盘</h1>
				<span>更 多</span>
			</div>
			<div class="hothouses_bot">
				<div class="houselis" v-for="item in hothousesList" :key="item">
					<div class="houselis_left">
						<img :src="item.img" alt="">
					</div>
					<div class="houselis_right">
						<div class="hright1">
							<h2>{{item.title}}</h2>
						</div>
						<div class="hright2">
							{{item.size}}
						</div>
						<div class="hright3">
							<span>{{item.price}}</span>
							<span>{{item.danprice}}</span>
						</div>
						<div class="hright4">
							小区
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<!-- 经纪人 -->
		<div class="broker">
			<div class="broker_top">
				<h1>经纪人</h1>
				<span @click="gobroker">更 多</span>
			</div>
			<div class="broker_bot">
				<li class=" brokerlis">
					<img src="https://images.sqfcw.com/attachment/config/20201104/1d7aa35b471d150fe549ca7649e9a31e91e38dd4.png?x-oss-process=style/w_120" alt="">
					<h1>建发曹颖</h1>
					<span>建发·文瀚府</span>
					<div>咨询</div>
					<div class="imgs">
						<img src="https://images.tengfangyun.com/images/new_icon/No3.png" alt="">
					</div>
				</li>
				<li class=" brokerlis">
					<img src="https://images.sqfcw.com/attachment/config/20201001/277ca10eb34757a579a2ecc9ce32eb70cc93c579.png?x-oss-process=style/w_80" alt="">
					<h1>朗诗-李晓彤</h1>
					<span>朗诗蔚蓝.朗诗 · ···</span>
					<div>咨询</div>
				</li>
				<li class=" brokerlis">
					<img src="https://images.sqfcw.com/attachment/config/20201026/17da3579a81159dc87cb285ea6ce159d8b1ffcf5.png?x-oss-process=style/w_80" alt="">
					<h1>学府-苏泉泽</h1>
					<span>华地 · 学府名都</span>
					<div>咨询</div>
				</li>
			</div>
		</div>
		<div class="imgimgs">
			<img src="https://images.sqfcw.com/attachment/other/20210621/309d2c163d05ba6fa044ea98c820790c28fac29a.jpeg?x-oss-process=style/w_8601" alt="">
		</div>
		<!-- 二手房 -->
		<div class="secondhouse">
			<div class="secondhouse_top">
				<h1>二手房</h1>
				<span>更 多</span>
			</div>
			<div class="secondhouse_bot">
				<div class="houselis" v-for="item in secondhouseList" :key="item">
					<div class="houselis_left">
						<img :src="item.img" alt="">
					</div>
					<div class="houselis_right">
						<div class="hright1">
							<h2>{{item.title}}</h2>
						</div>
						<div class="hright2">
							{{item.size}}
						</div>
						<div class="hright3">
							<span>{{item.price}}</span>
							<span>{{item.danprice}}</span>
						</div>
						<div class="hright4">
							小区
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import { getClassifyNavList ,getHousesList} from "@/service";
	export default {
		data() {
			return {
				hothousesList:[
					{
						img:"https://images.sqfcw.com/attachment/build/20201204/7feee8cd9afbdb480207796e77feb05efcf71a40.png?x-oss-process=style/w_240",
						title:'富园·时光印',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210416/38dc6ae8afe5d21274be757d736832d54211cfe8.png?x-oss-process=style/w_240',
						title:'恒大湖山半岛',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20201201/b0cd0fbab7ab8f33193839d0abdeb38b00a7cd62.png?x-oss-process=style/w_240',
						title:'逸品尚居',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20201201/4dd07f2d5a84d1a7022deaa1873112b3b167dbad.jpeg?x-oss-process=style/w_240',
						title:'华鸿清华名邸',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210202/0b794c5752f419881270b5e8f47c12e125510eb7.png?x-oss-process=style/w_240',
						title:'绿城·梨园湾小镇',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20200630/ed9ecf56dead60919ec9939ac3969ba3cb8bea06.png?x-oss-process=style/w_240',
						title:'中南紫云集',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210425/864c1b5e6ea230d0653374027fefbfc34e92d663.jpeg?x-oss-process=style/w_240',
						title:'建发·文瀚府',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
				],
				secondhouseList:[
					{
						img:"https://images.sqfcw.com/attachment/information/20210623/d2a3d8dc8c201bf19847803d363a664406abcaee.jpeg?x-oss-process=style/w_240",
						title:'水韵城',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:"https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240",
						title:'金外滩国际花园',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:"https://images.sqfcw.com/attachment/information/20210527/05bf574943e4e982d0e2f706527152d982bb5cc9.jpeg?x-oss-process=style/w_240",
						title:'马陵小区',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:"https://images.sqfcw.com/attachment/information/20210620/957f1ebbdc55cf2c91ce299401705190e67022e9.jpeg?x-oss-process=style/w_240",
						title:'墨香居',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:"https://images.sqfcw.com/attachment/information/20210621/0d291ef6e2cc844bd7be91a417a63df95a5f55eb.jpeg?x-oss-process=style/w_240",
						title:'碧桂园翰林阁',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:"https://images.sqfcw.com/attachment/information/20210621/d873a26c2a50ac9a6573290e282d3279b8822f62.jpeg?x-oss-process=style/w_240",
						title:'华泰御花园',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:"https://images.sqfcw.com/attachment/information/20210616/aa1606569a0faaf04b13f2c8eb651b8b200f4923.jpeg?x-oss-process=style/w_240",
						title:'恒大悦澜湾',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
				],
				
			}
		},
		onLoad() {

		},
		async onShow(){
		},
		methods: {
			//跳转搜索页面
			goSearch: function () {
				wx.navigateTo({
					url: "/pages/search/index",
				});
			},
			//跳转经纪人
			gobroker:function(){
				wx.navigateTo({
					url: "/pages/broker/index",
				});
			},
			//跳转资讯
			goinformation:function(){
				console.log(111);
				wx.navigateTo({
					url:'/pages/information/index'
				})
			},
      //跳转楼市圈
      realestate:function(){
				wx.navigateTo({
					url:'/pages/realestate/index'
				})
			},
			//跳转地图
			gomap:function(){
				wx.navigateTo({
					url:'/pages/detail/mapFindHome'
				})
			},
			//跳转直播看房
			golive:function(){
				wx.navigateTo({
					url:'/pages/live/index'
				})
			},
      //跳转买房
      gobuyhome:function(){
        wx.navigateTo({
					url:'/pages/buyhome/index'
				})
      },
      //跳转租房
      goputtinghome:function(){
        wx.navigateTo({
					url:'/pages/puttinghome/index'
				})
      },
      //跳转团购看房
      gogrouphouse:function(){
        wx.navigateTo({
					url:'/pages/grouphouses/index'
				})
      },
      //跳转求租
      gowanthouse:function(){
        wx.navigateTo({
					url:'/pages/wantHouse/index'
				})
      },
      //跳转求购
      gowantedbuy:function(){
        wx.navigateTo({
					url:'/pages/wantedBuy/index'
				})
      }
		}
	}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgb(5, 117, 241),
    rgb(27, 137, 247),
    rgb(55, 163, 255)
  );
}
.head {
  width: 90%;
  margin: 0 auto;
  height: 100rpx;
  line-height: 140rpx;
  font-size: 20px;
  color: #fff;
}
.search {
  width: 90%;
  height: 120rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  .sear {
    width: 100%;
    height: 56rpx;
    background: rgb(145, 199, 247);
    border-radius: 16rpx;
    color: rgb(245, 247, 246);
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div:nth-child(1) {
      width: 120rpx;
      height: 40rpx;
      border-right: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      > span {
        font-size: 12px;
        margin-left: 12rpx;
      }
    }
    .ipt {
      display: flex;
      width: 500rpx;
      align-items: center;
      justify-content: space-between;
      > input {
        font-size: 14px;
        color: #fff;
      }
      > img {
        width: 50rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }
    }
  }
}
.swiper {
  width: 100%;
  height: 360rpx;
  .swiper_item {
    width: 100%;
    height: 100%;
    >img {
      width: 100%;
      height: 100%;
    }
    >img:nth-child(1){
      background: pink;
    }
    >img:nth-child(2){
      background: plum;
    }
    >img:nth-child(3){
      background: paleturquoise;
    }
  }
}
.classifynav {
  width: 100%;
  height: 360rpx;
  margin: 40rpx 0;
  .cnav {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    > li {
      width: 120rpx;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      > img {
        width: 110rpx;
        height: 110rpx;
      }
      > span {
        font-size: 12px;
      }
    }
  }
}
.information {
  width: 90%;
  margin: 0 auto;
  height: 540rpx;
  display: flex;
  flex-direction: column;
  .information_top {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > h1 {
      font-weight: 500;
      font-size: 20px;
    }
    > span {
      color: rgb(153, 153, 153);
      font-size: 14px;
    }
  }
  .information_bot {
    width: 100%;
    height: 360rpx;
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    box-shadow: rgb(211, 206, 206) 3px 3px 5px 3px;
    .li {
      display: flex;
      height: 80rpx;
      align-items: center;
      justify-content: space-between;
      > span {
        font-size: 14px;
        margin-left: 20rpx;
        background: linear-gradient(
          135deg,
          rgb(245, 208, 214),
          rgb(248, 151, 154),
          rgb(250, 112, 112)
        );
        color: #fff;
        padding: 0 10rpx;
      }
      > div {
        width: 530rpx;
        height: 40rpx;
        line-height: 40rpx;
        overflow: hidden;
        font-size: 14px;
        color: rgb(90, 92, 90);
      }
    }
  }
}
.hothouses {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .hothouses_top {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > h1 {
      font-weight: 500;
      font-size: 20px;
    }
    > span {
      color: rgb(153, 153, 153);
      font-size: 14px;
    }
  }
  .hothouses_bot {
    width: 100%;
    display: flex;
    flex-direction: column;
    .houselis {
      width: 100%;
      height: 240rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .houselis_left {
        width: 260rpx;
        height: 180rpx;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .houselis_right {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        .hright1 {
          height: 50rpx;
          line-height: 50rpx;
          display: flex;
          align-items: center;
          font-weight: bold;
        }
        .hright2 {
          height: 36rpx;
          line-height: 36rpx;
          color: rgb(90, 93, 90);
          font-size: 14px;
        }
        .hright3 {
          height: 50rpx;
          display: flex;
          align-items: center;
          font-size: 12px;
          > span:nth-child(1) {
            color: rgb(255, 153, 0);
          }
          > span:nth-child(2) {
            color: rgb(102, 102, 102);
            margin-left: 12rpx;
          }
        }
        .hright4 {
          height: 40rpx;
          line-height: 40rpx;
          width: 100rpx;
          background: rgb(238, 240, 239);
          color: rgb(141, 144, 142);
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
}
.broker {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .broker_top {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > h1 {
      font-weight: 500;
      font-size: 20px;
    }
    > span {
      color: rgb(153, 153, 153);
      font-size: 14px;
    }
  }
  .broker_bot {
    height: 340rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .brokerlis {
      width: 220rpx;
      height: 320rpx;
      border: 1px solid rgb(241, 241, 241);
      box-shadow: 3px 3px 3px rgb(244, 244, 244);
      display: flex;
      flex-direction: column;
      position: relative;
      > img {
        width: 90rpx;
        height: 90rpx;
        margin: 20rpx auto;
        border-radius: 50%;
        background: rgb(248, 151, 154);
      }
      > h1 {
        // font-weight: bold;
        font-size: 16px;
        margin: 20rpx auto 0;
      }
      > span {
        font-size: 12px;
        color: rgb(223, 223, 223);
        margin: 8rpx auto;
      }
      > div {
        width: 140rpx;
        height: 60rpx;
        margin: 16rpx auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
          90deg,
          rgb(248, 97, 104),
          rgb(247, 126, 103),
          rgb(250, 167, 98)
        );
        border-radius: 30rpx;
        color: #fff;
        font-size: 14px;
      }
      .imgs {
        width: 120rpx;
        height: 40rpx;
        background: none;
        position: absolute;
        top: 80rpx;
        left: 54rpx;
        > img {
          width: 146rpx;
          height: 56rpx;
          background: none;
        }
      }
    }
  }
}
.imgimgs {
  width: 90%;
  margin: 60rpx auto;
  height: 170rpx;
  > img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
  }
}
.secondhouse {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .secondhouse_top {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > h1 {
      font-weight: 500;
      font-size: 20px;
    }
    > span {
      color: rgb(153, 153, 153);
      font-size: 14px;
    }
  }
  .secondhouse_bot {
    width: 100%;
    display: flex;
    flex-direction: column;
    .houselis {
      width: 100%;
      height: 240rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .houselis_left {
        width: 260rpx;
        height: 180rpx;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .houselis_right {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        .hright1 {
          height: 50rpx;
          line-height: 50rpx;
          display: flex;
          align-items: center;
          font-weight: bold;
        }
        .hright2 {
          height: 36rpx;
          line-height: 36rpx;
          color: rgb(90, 93, 90);
          font-size: 14px;
        }
        .hright3 {
          height: 50rpx;
          display: flex;
          align-items: center;
          font-size: 12px;
          > span:nth-child(1) {
            color: rgb(255, 153, 0);
          }
          > span:nth-child(2) {
            color: rgb(102, 102, 102);
            margin-left: 12rpx;
          }
        }
        .hright4 {
          height: 40rpx;
          line-height: 40rpx;
          width: 100rpx;
          background: rgb(238, 240, 239);
          color: rgb(141, 144, 142);
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
}
</style>
